<template>
  <div class="aui-card-list">
    <uni-list-query-card :queryShow="queryShow" @query-click="getDataList()" @click="(e)=>{this.queryShow=e}" @searchReset="searchReset()">
      <el-col :span="6">
        <el-form-item label="接口编码">
          <el-input v-model="dataForm.apiCode"
                    placeholder="接口编码" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="接口名称">
          <el-input v-model="dataForm.apiName"
                    placeholder="接口名称" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="请求状态">
          <el-select v-model="dataForm.apiStatus" clearable>
            <el-option :key="true" label="成功" :value="true"></el-option>
            <el-option :key="false" label="失败" :value="false"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <template slot="other">
        <el-col :span="10">
          <el-form-item label="接口请求时间">
            <el-date-picker
              v-model="dataForm.beginDate"
              value-format="yyyy-MM-dd"
              style="width: 160px;">
            </el-date-picker>
            -
            <el-date-picker
              v-model="dataForm.endDate"
              value-format="yyyy-MM-dd"
              style="width: 160px;">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </template>
    </uni-list-query-card>
    <el-card shadow="never" class="aui-card-list-body">
      <vxe-toolbar setting>
        <template v-slot:buttons>
        </template>
        <template v-slot:tools>
          <el-button icon="el-icon-refresh" @click="getDataList()" circle></el-button>
        </template>
      </vxe-toolbar>
      <!--  锁定表头设置   :height="this.tableHeight" -->
      <vxe-table ref="xTable"
                 :loading="dataListLoading"
                 class="vxe-table-element"
                 max-height="auto"
                 auto-resize
                 :sort-config="{trigger:'cell'}"
                 @sort-change="sortChange"
                 :data="dataList">
        <vxe-table-column type="index" title="序号" align="center" width="60"></vxe-table-column>
        <vxe-table-column field="apiCode" title="接口名称">
          <template slot-scope="scope">
            {{scope.row.apiCode}}--{{scope.row.apiName}}
            <el-tooltip class="item" effect="dark" content="接口请求详情" placement="bottom">
              <el-tag style="margin-left: 10px;" @click="viewLogDetails(scope.row)"><i class="el-icon-warning-outline"></i></el-tag>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="接口健康日历" placement="bottom">
              <el-tag style="margin-left: 10px;" @click="viewHealth(scope.row)"><i class="el-icon-date"></i></el-tag>
            </el-tooltip>
          </template>
        </vxe-table-column>
        <vxe-table-column field="apiReqTime" title="接口请求时间" width="160">
        </vxe-table-column>
        <vxe-table-column field="apiRspTime" title="接口响应时间" width="160">
        </vxe-table-column>
        <vxe-table-column field="apiDuration" title="接口耗时(ms)" width="100">
        </vxe-table-column>
        <vxe-table-column field="apiStatus" title="接口状态" width="100">
          <template slot-scope="scope">
            <el-tag v-if="!scope.row.apiStatus" size="small" type="danger">失败</el-tag>
            <el-tag v-else size="small" type="success">成功</el-tag>
          </template>
        </vxe-table-column>
        <vxe-table-column field="createDate" title="创建时间" width="160">
        </vxe-table-column>
      </vxe-table>
      <el-pagination
        :current-page="page"
        :page-sizes="pageSizes"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </el-card>
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './apiLog-add-or-update'
import Template from '../wechat/template'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      searchShow: true,
      mixinViewModuleOptions: {
        activatedIsNeed: false,
        getDataListURL: '/api/apiLog/page',
        getDataListIsPage: true,
        deleteURL: '/api/apiLog',
        deleteIsBatch: true,
        exportURL: '/api/apiLog/export'
      },
      headLock: false,
      dataForm: {
        apiCode: '',
        apiName: '',
        beginDate: '',
        endDate: '',
        apiStatus: ''
      }
    }
  },
  components: {
    Template,
    AddOrUpdate
  },
  activated () {
    // 通过路由参数pid, 控制列表请求操作
    this.$nextTick(() => {
      this.dataForm = {}
      if (this.$route.params.date) {
        const dateStr = this.$route.params.date
        this.dataForm.beginDate = dateStr
        this.dataForm.endDate = dateStr
      }
      if (this.$route.params.apiName) {
        this.dataForm.apiName = this.$route.params.apiName
      }
      this.dataForm.apiStatus = this.$route.params.apiStatus
      this.getDataList()
    })
  },
  methods: {
    viewHealth (row) {
      // 打开路由
      var router = {
        name: 'api-apiHealthCalendar',
        id: '',
        menuId: this.$route.meta.menuId,
        oldName: 'api-apiHealthCalendar',
        path: 'api/apiHealthCalendar',
        title: '接口健康日历'
      }
      var params = {
        timestamp: this.$xeutils.timestamp(),
        apiCode: row.apiCode,
        reqTime: row.apiReqTime
      }
      this.$options.methods.openNewTab(this.$router, router, params)
    },
    // 新增 / 修改
    viewLogDetails (row) {
      let id
      if (row) {
        id = row.id
      }
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.dataForm.id = id
        this.$refs.addOrUpdate.init()
      })
    }
  }
}
</script>
